<template>
  <div>
    <el-row>
      <el-col :span="22">
        <el-form :inline="true" :model="searchData" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="searchData.orderNumber" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="下单时间:">
            <el-date-picker unlink-panels
                            v-model="searchData.createDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">

            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="orderNumber" label="订单编号" width="250" align="center" >
        <template slot-scope="scope">
          <a href="javascript:void(0)" @click="details(scope.row)">{{scope.row.orderNumber}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="consumer.realName" label="下单用户姓名" width="120" align="center"></el-table-column>
      <el-table-column prop="consumer.phone" label="电话号码" width="120" align="center"></el-table-column>
      <el-table-column prop="createDate" label="下单时间" width="250" align="center"></el-table-column>

      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="viewTheOrder(scope.row)" type="primary" size="small" >查看订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="50%" @close="dialogClose">
      <el-dialog
          width="40%"
          title="退货理由"
          :visible.sync="innerVisible"
          append-to-body>
        <el-card class="box-card" style="width: 100%;height: 100%">
          <div slot="header">
            <el-row :gutter="20">
              <el-col :span="20">
                <div class="grid-content bg-purple">
                  <el-avatar :size="90" :src="'http://localhost:90'+Back.imgLink" @error="errorHandler"  style="margin: 0 auto">
                    <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
                  </el-avatar>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-descriptions class="margin-top" title="退货详情" :column="1"  border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                订单号
              </template>
              {{Back.orderNumber}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                退货理由
              </template>
              {{Back.backReason}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                退货时间
              </template>
              {{Back.createDate}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                退货金额
              </template>
              {{Back.totalPrice}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <div slot="footer" class="dialog-footer">
          (请确认货后再验收)
          <el-button @click="dialogClose">取 消</el-button>
          <el-button v-if="active === 4&&backTag === 'B001-3'" type="primary" @click="acceptance">验收</el-button>
          <el-button v-if="active === 4&&backTag === 'B001-4'" type="primary" @click="review">审核</el-button>
          <el-button type="danger" @click="NotReturnable">不退货</el-button>
        </div>
      </el-dialog>
      <el-descriptions class="margin-top"  :column="2" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单编号
          </template>
          {{row.orderNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            下单时间
          </template>
          {{row.createDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            收货人姓名
          </template>
          {{row.merchant.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            收货人电话
          </template>
          {{row.merchant.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            提货人姓名
          </template>
          {{row.consumer.realName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            提货人电话
          </template>
          {{row.consumer.phone}}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="row.orderDetails" border style="width: 100%">
        <el-table-column prop="price" label="商品名称" width="180px" align="center">
          <template slot-scope="scope">
            {{scope.row.product.name}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="150px" align="center"></el-table-column>
        <el-table-column prop="amount" label="数量" width="150px" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" width="150px" align="center">
          <template slot-scope="scope">
            {{scope.row.product.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="subtotal" label="总金额" width="150px" align="center"></el-table-column>
      </el-table>
      <el-steps v-if="backTag === 'B001-1'" :active="active" finish-status="success">
        <el-step title="付款"></el-step>
        <el-step title="平台发货"></el-step>
        <el-step title="商户收货"></el-step>
        <el-step title="用户提货"></el-step>
      </el-steps>
      <el-steps v-if="backTag !== 'B001-1'&&active === 4" :active="active2" finish-status="success">
        <el-step title="完成退货理由填写"></el-step>
        <el-step title="商户验收"></el-step>
        <el-step title="平台审核"></el-step>
        <el-step title="退款"></el-step>
      </el-steps>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" >取 消</el-button>
        <el-button v-if="active === 2" type="primary" @click="ToReceiving">收货</el-button>
        <el-button v-if="active === 3" type="primary" @click="ToDelivery">提货</el-button>
        <el-button v-if="active === 4&&backTag === 'B001-3'" @click="Toacceptance" type="primary" size="small" >验收</el-button>
        <el-button v-if="active === 4&&backTag === 'B001-4'" @click="Toacceptance" type="primary" size="small" >审核</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MerchantOrder',
  components: {},
  props: {},
  data () {
    return {
      active:0,
      active2:0,
      backTag:'B001-1',
      img: '',
      merchant: {},
      searchData:{
        orderNumber: '',
        createDate:[]
      },
      tableData: [],
      currentPage : 1,
      total : 0,
      pageSize : 5,
      dialogFormVisible : false,
      innerVisible:false,
      detailsOrNot :'details',
      row:{merchant: {name: '', phone: ''}, consumer: {realName: '', phone: ''}, orderDetails: []},
      Back:{},
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    initMerchant() {
      this.merchant = this.$store.state.merchant
    },
    handleSizeChange(val) {//页大小改变时
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.InitializeThePage();
    },
    handleCurrentChange(val) {//页码发生改变时
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.InitializeThePage();
    },
    InitializeThePage() {
      Object.assign(this.searchData, {"currentPage": this.currentPage, "pageSize": this.pageSize, "merchantId": this.merchant.merchantId})
      this.$axios.post('http://localhost:8090/orders/getOrderByMerchantIdOrConsumerId', this.searchData).then(({ data }) => {
        if(data !== null && data !== undefined){
          this.tableData = data.records;
          this.total = data.total;
          console.log(data);
        }else {
          this.$notify({
            title: '警告',
            message: '获取订单失败',
            type: 'warning'
          });
        }
      });
    },
    onSubmit(){
      this.InitializeThePage();
    },
    details(row){
      this.row = row;
      this.dialogFormVisible = true;
      this.detailsOrNot = 'details';
    },
    dialogClose(){
      this.dialogFormVisible = false;
    },
    //收货
    receiving(row){
      this.row = row;
      this.dialogFormVisible = true;
      this.detailsOrNot = 'receiving';
    },
    ToReceiving(){
      this.$axios.get('http://localhost:8090/orders/receivingByOrderId?orderId='+this.row.orderId).then(({ data }) => {
        if(data === true){
          this.$notify({
            title: '成功',
            message: '收货成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.InitializeThePage();
        }else {
          this.$notify({
            title: '警告',
            message: '收货失败',
            type: 'warning'
          });
        }
      });
    },
    viewTheOrder(row){
      this.row = row;
      this.dialogFormVisible = true;
      if (row.payTag === 'K002-1'||row.payTag === 'K002-2'){
        this.active = 0;
      }else if (row.payTag === 'K002-3'){
        this.active = 1;
      }
      if (row.conveyTag === "P001-2"){
        this.active = 2;
      }else if (row.conveyTag === "P001-3"){
        this.active = 3;
      }else if (row.conveyTag === "P001-4"){
        this.active = 4;
      }
      if(row.backTag === 'B001-1'){
        this.backTag = 'B001-1';
      }else if (row.backTag === 'B001-2'){
        this.backTag = 'B001-2';
      }else if (row.backTag === 'B001-3'){
        this.backTag = 'B001-3';
        this.active2 = 1;
      }else if (row.backTag === 'B001-4'){
        this.backTag = 'B001-4';
        this.active2 = 2;
      }else if (row.backTag === 'B001-5'){
        this.backTag = 'B001-5';
        this.active2 = 3;
      }else if (row.backTag === 'B001-6'){
        this.backTag = 'B001-6';
        this.active2 = 4;
      }
    },
    //提货
    delivery(row){
      this.row = row;
      this.dialogFormVisible = true;
      this.detailsOrNot = 'delivery';
    },
    ToDelivery(){
      this.$axios.get('http://localhost:8090/orders/deliveryByOrderId?orderId='+this.row.orderId).then(({ data }) => {
        if(data === true){
          this.$notify({
            title: '成功',
            message: '提货成功',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.InitializeThePage();
        }else {
          this.$notify({
            title: '警告',
            message: '提货失败',
            type: 'warning'
          });
        }
      });
    },
    Toacceptance(){
      this.$axios.get('http://localhost:8090/back/getbackByorderNumber?orderNumber='+this.row.orderNumber).then(({ data }) => {
        if(data !== null && data !== undefined){
          this.Back = data;
          this.innerVisible = true;

        }else {
          this.$notify({
            title: '警告',
            message: '获取退货信息失败',
            type: 'warning'
          });
        }
      });
    },
    acceptance(){
      this.$axios.get('http://localhost:8090/back/acceptanceByOrderNumber?orderNumber='+this.row.orderNumber).then(({ data }) => {
        if(data === true){
          this.backTag='B001-3';
          this.innerVisible = false;
          this.dialogFormVisible = false;
          this.InitializeThePage();
          this.$notify({
            title: '成功',
            message: '验收成功',
            type: 'success'
          });
        }else {
          this.$notify({
            title: '警告',
            message: '验收失败',
            type: 'warning'
          });
        }
      });
    },
    NotReturnable(){

    },
    review(){
      this.$axios.get('http://localhost:8090/back/reviewByOrderNumber?orderNumber='+this.row.orderNumber).then(({ data }) => {
        if(data === true){
          this.backTag='B001-4';
          this.innerVisible = false;
          this.dialogFormVisible = false;

          // this.InitializeThePage();
          this.refund();

        }else {
          this.$notify({
            title: '警告',
            message: '审核失败',
            type: 'warning'
          });
        }
      });
    },
    refund(){
      this.$axios.get('http://localhost:8090/alipay/refund?orderNo='+this.row.orderNumber).then(({ data }) => {
        if(data !== null && data !== undefined){
          this.$notify({
            title: '成功',
            message: '退款成功',
            type: 'success'
          });
          // this.selectPayList()
          this.reasonForReturn();
          this.InitializeThePage();
          this.$notify({
            title: '成功',
            message: '退款成功',
            type: 'success'
          });
        }else {
          // this.selectPayList()
          this.$notify({
            title: '警告',
            message: '退款失败',
            type: 'warning'
          });
        }
      });
    },
    reasonForReturn(){
      this.$axios.get('http://localhost:8090/back/reasonForReturn?orderNumber='+this.row.orderNumber).then(({ data }) => {
        if(data){
          this.$notify({
            title: '退款成功',
            message: '已退款，请注意到账信息',
            type: 'success'
          });
          this.InitializeThePage();
        }else {
          this.$notify({
            title: '警告',
            message: '退款失败',
            type: 'warning'
          })
        }
      })
    },
    selectPayList(){
      this.$axios.get('http://localhost:8090/alipay/selectPayList?orderNumber='+this.row.orderNumber).then(({ data }) => {
        if(data===1){
          this.$notify({
            title: '失败',
            message: '订单号不存在',
            type: 'error'
          });
        }else if(data===2){
          // 成功
          this.$notify({
            title: '成功',
            message: '支付成功',
            type: 'success'
          });
        }else if(data===3){
          this.$notify({
            title: '失败',
            message: '第三方调用失败',
            type: 'error'
          });
        }
      });
    },
    errorHandler() {
      return true;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initMerchant()
    this.InitializeThePage()
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
